import {Input} from "antd-mobile";
import {useState} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faSync} from "@fortawesome/free-solid-svg-icons";
import StationPicker from "./StationPicker";


const StartEndInput = (props: any)=>{

    const [visible, setVisible] = useState(false);
    const [isStart, setIsStart] = useState(true);

    return (
        <div style={{
            width: "100%",
            display: "flex",
            justifyContent: "space-around",
            margin: "1rem 0"
        }}>
            <div onClick={()=>{
                setIsStart(true);
                setVisible(true);

            }}
                 style={{
                width: "33%"
            }}
            >
                <Input
                    placeholder={"起始车站"}
                    value={props.start}
                    readOnly={true}
                />
            </div>

            <FontAwesomeIcon icon={faSync}
                             onClick={()=>{
                const tend = props.end;
                const tstart = props.start;
                props.setStart(tend);
                props.setEnd(tstart);
            }}
                             size={"2x"}
                             color={"blue"}
            />
            <div onClick={()=>{
                    setIsStart(false);
                    setVisible(true);
                }}
                 style={{
                width: "30%"
            }}
            >
                <Input
                    placeholder={"终点车站"}
                    value={props.end}
                    readOnly={true}
                />
            </div>

            <StationPicker visible={visible}
                           onClose={()=>setVisible(false)}
                           onConfirm={val=> {
                               if(isStart){
                                   props.setStart(val[1]);
                               }else{
                                   props.setEnd(val[1]);
                               }
                               setVisible(false);
                           }}
                           title={isStart?"选择起始车站":"选择终点车站"}
            />

        </div>
    )
}


export default StartEndInput;
